<template>
  <div class="subneed">
    <div class="subCon">
      <span>活动类型：</span>
      <el-select v-model="value1" placeholder="请选择">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="subCon">
      <span>活动人数：</span>
      <el-select v-model="value2" placeholder="请选择">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="subCon">
      <span>活动预算：</span>
      <el-select v-model="value3" placeholder="请选择">
        <el-option
          v-for="item in options3"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="subCon">
     <div class="subCon">
       <div class="block">
         <span class="demonstration">活动时间：</span>
         <el-date-picker
           v-model="value1"
           type="date"
           placeholder="选择日期">
         </el-date-picker>
       </div>

     </div>
     <div class="subCon">
       <div class="block">
         <span class="demonstration">活动时间：</span>
         <el-input v-model="input" placeholder="请输入内容" class="comname"></el-input>

       </div>

     </div>
     <div class="subCon">
       <div class="block">
         <span class="demonstration">您的称呼：</span>
         <el-input v-model="input2" placeholder="请输入内容" class="comname"></el-input>

       </div>

     </div>
     <div class="subCon">
       <div class="block">
         <span class="demonstration">您的电话：</span>
         <el-input v-model="input3" placeholder="请输入内容" class="comname"></el-input>

       </div>

     </div>
    </div>
    <div class="sub">提交需求</div>
  </div>
</template>

<style>
  .comname{
    width: 3.78rem;
  }
  .time{
    display: inline-block;
  }
  .subneed{
    padding: .5rem .4rem;
  }
  .subCon{
    margin-bottom: .2rem
  ;
  }
  .subCon>span,.demonstration{
    font-size: .32rem;
    color: #494d4d;
  }
.subneed > textarea{
  width: 4.5rem;
  height: 2rem;
  display: block;
  font-size: .32rem;
  color: #9e9a95;
  margin: 0 auto;
  margin-top: 2rem;
  border: 1px solid #9e9a95;
  resize: none;
}
  .sub{
    width: 2rem;
    height: .9rem;
    line-height:.9rem;
    text-align: center;
    background: #bcbbba;
    margin: 0 auto;
    margin-top: 2rem;
  }
  .el-select{
    display: inline-block;
  }
</style>
<script>
  export default {
    data() {
      return {
        options1: [{
          value: '选项1',
          label: '会务'
        }, {
          value: '选项2',
          label: '团建'
        }, {
          value: '选项3',
          label: '旅行'
        }, {
          value: '选项4',
          label: '年会'
        }, {
          value: '选项5',
          label: '其他'
        }],
        value1: '',
        options2: [{
          value: '选项1',
          label: '20人一下'
        }, {
          value: '选项2',
          label: '20-50人'
        }, {
          value: '选项3',
          label: '50-100人'
        }, {
          value: '选项4',
          label: '100-300人'
        }, {
          value: '选项5',
          label: '300人以上'
        }],
        value2: '',
        options3: [{
          value: '选项1',
          label: '1W以下'
        }, {
          value: '选项2',
          label: '1W-5W'
        }, {
          value: '选项3',
          label: '5W-10W'
        }, {
          value: '选项4',
          label: '10W-20W'
        }, {
          value: '选项5',
          label: '20W以上'
        }],
        value3: '',
        //时间数据
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
        //输入框
        input:'',
        input2:'',
        input3:'',
      }
    }
  }
</script>
